layui.use('element', function () {
    var $ = layui.jquery,
        element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    // 定义触发事件
    var active = {
        tabAdd: function (id, title, content) {
            //新增一个Tab项
            element.tabAdd('left-nav-tab', {
                title: title,
                content: content,
                id: id
            })
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('left-nav-tab', id);
        }
    }

    // 定义iframe标签
    var iframestart = "<iframe frameborder='0' width='100%' height='100%' src='";
    var iframeend = "'></iframe>"

    //左侧导航点击事件
    $(".layui-nav-tree a[data-id]").on('click', function () {
        var that = $(this);
        // 拿到标签页的data-id属性值并且判断tab栏中是否存在，
        // 如果存在就切换到相应tab栏，没有就新增
        var id = that.data("id");
        // 标志: 原来是否有标签标识
        var flag = true;
        // 遍历已有的标签页,找到其id是否已经存在
        $('.title li').each(function () {
            var layid = $(this).attr("lay-id");
            console.log(layid);
            // 如果有就切换
            if (id == layid) {
                flag = false;
                active.tabChange(id);
                return;
            }
        });
        if (flag) {
            // 遍历完所有标签页都没有，那么必须新增标签页
            var title = that.text();
            // 拼接iframe
            var content = iframestart + that.data("href") + iframeend;
            // 新增标签页
            active.tabAdd(id, title, content);
            // 立即切换到新增的标签页
            active.tabChange(id);
        }
    });


});